<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       html{
           font-size: 16px;
       }
       body{
           margin:0px;
           padding:0px;
       }
       .scope{/*最大宽度和最小宽度*/
           min-width: 320px;
           max-width: 540px;;
       }
       header{
          /* height: 5rem;*/
           height: 80px;
           background: skyblue;
       }
       header h1{
           font-weight: bold;
           font-family: "微软雅黑";
           text-align: center;  /*水平居中*/
           line-height: 5rem; /*行高*/
           margin: 0px;
           text-shadow: 0 0 2px #000;/*文字阴影*/
       }
       .storeInfo .storeInfoLeft{
           float: left;
           width: 30%;
           margin-left: 0.5rem;
           margin-top: 1.15rem;
           margin-right: 1.1rem;
       }
       .storeInfo .storeInfoRight{
           float: left;
           widows: 65%;
       }
       .storeInfo .storeInfoRight div{
           margin-bottom: 0.5rem;
       }
       .storeInfo .storeInfoRight .storeName{
           font-size: 2rem;
       }
       .storeInfo .storeInfoRight .storeHonor{      
            font-size: 1.2rem;
       }
       .storeInfo .storeInfoRight .storeButton div{
            width: 6rem; /*宽度*/
            height: 2rem; /*高度*/
            background: skyblue;
            color: white;
            display: inline-block;
            line-height: 2rem;
            text-align: center;
            border-radius: 5px;
       }
       .storeInfo::after{/*清除浮动*/
           content: '';
           display: block;
           clear: both;
       }
       /*导航*/
       nav {
           height: 5rem;
           border-top:1px solid #dbdbdb;
           border-bottom:1px solid #dbdbdb;
       }
       nav ul{
           list-style-type: none;
           padding: 0px;
           margin: 0px;
       }
       nav ul li{
           display: inline-block;
           width: 20%;
           height: 5rem;
           line-height: 5rem;
           text-align: center;
           position: relative;/*父容器参照物确定位置*/
       }
       nav ul li::before{
           content: '';
           width: 0.8rem;
           height: 0.8rem;
           border-right: 1px solid #dbdbdb;
            border-bottom: 1px solid #dbdbdb;
           display: none;
           transform: rotate(45deg);/*旋转*/
           position: absolute;
           bottom: -0.563rem;
           left: 2.5rem;
       }
       na ul li.selected::before{
           display: block;
       }
       nav ul li a{
           color: #555;
           font-size: 1.5rem;
           text-decoration: none;
           cursor: pointer;
       }
       .query{
           padding: 0.8rem;
           box-sizing: border-box;
       }
       .query .queryInput{
           width: 80%;
           border: 1px solid #dbdbdb;
           height: 2.5rem;
           font-size: 1.5rem;
           float: left;
            box-sizing: border-box;
       }
       .query .queryBtn{
           width: 20%;
           border: 1px solid #dbdbdb;
           height: 2.5rem;
           font-size: 1.2rem;
           float: left;
           box-sizing: border-box;
           text-align: center;
           line-height: 2.5rem;
       }
       .products .product{
           border-bottom: 1px solid #dbdbdb;
           box-sizing: border-box;
           padding: 1rem;
       }
        .products .product::after{
           content: '';
           display: block;
           clear: both; 
        }
       .products .product .pic{
           width: 30%;
           float: left;
           box-sizing: border-box;
           padding: 1rem;
       }
       .products .product .describe{
           width: 70%;
           float: left;
           box-sizing: border-box;
           padding: 1rem;
       }
       .products .product .pic .img{
           width: 100%;
       }
       .products .product .describe span{
           display: block;
           margin-bottom: 0.5rem;
       }
       .products .product .describe span.productName{
           font-size: 1.2rem;
       }
       .products .product .describe span.productPrice{
           font-size: 1.3rem;
       }
       .products .product .describe span.productChannel{
           font-size: 1.1rem;
       }

    </style>
</head>
<body>
   <header class="scope">
       <h1>商铺的全部商品</h1>
   </header>
   <section class="storeInfo scope">
       <img class="storeInfoLeft" src="./store.jpg" alt="商店logo">
       <div class="storeInfoRight">
           <div class="storeName">小快鱼旗舰店</div>
           <div class="storeHonor">商家好评率:89% 信用等级：8</div>
           <div class="storeButton">
               <div class="storeContact">联系卖家</div>
               <div class="storeFavor">收藏商店</div>
           </div>
       </div>
   </section>
   <nav class="scope">
       <ul>
           <li class="selected"><a href="#">查询</a></li>
           <li><a href="#">筛选</a></li>
           <li><a href="#">所有通道</a></li>
       </ul>
   </nav>
   <section class="query scope">
       <input type="text" class="queryInput">
       <div class="queryBtn">查询</div>
   </section>
   <section class="products scope">
       <section class="product">
           <div class="pic">
               <img src="./product1.jpg" alt="">
           </div>
           <div class="describe">
               <span class="productName">Kingston/金士顿 SM2280S3/120G M.2280 SSD笔记本固态硬盘</span>
               <span class="productPrice">$128.00</span>
               <span class="productChannel">所属通道：淘宝商城</span>
           </div>
       </section>
   </section>
   <footer class="scope"></footer>
</body>
</html>